<template>
  <transition name="opacity">
    <div id="my_pass" :class="isShow?'show':'hide'">
      <div class="modal_box">
        <div class="modal_title flex f_j_b">
          <span class="close_pop blank"></span>
          <p class="large-text text-black">{{modalTitle}}</p>
          <span class="close_pop" @click="defaultCancel"></span>
        </div>
        <div class="modal_body">
          <slot name="orderInfo"></slot>

          <!-- 由于在 app中update_dt问题，所以在is-show-ore="false" 的前提下仍然需要显示ORE余额，才使用该slot -->
          <slot name="cashAmount"></slot>

          <!-- isShowBalance=false -->
          <p
            v-if="isShowBalance"
            class="mini-text text-black"
            style="text-align:center;margin-top:10px;"
          >钱包余额：{{$store.state.user.userInfo.lucy_balance}} LUCY</p>

          <div class="pwd_area flex f_j_c">
            <span class="pwd_num" v-for="(m,n) in 6" :key="n" @click="onFocus">
              <span class="secret_num" v-if="splitPwd[n]">•</span>
            </span>
          </div>
          <input id="secret_input" class="input" type="text" autocomplete="off" v-model="inputVal" />
        </div>
        <div v-if="modalBtnText" class="confirm_btn" @click="returnPaypwd">{{modalBtnText}}</div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "payPasswordCom",
  props: {
    modalTitle: {
      default: "请输入交易密码"
    },
    modalBtnText: {
      default: ""
    },
    isShowBalance: {
      default: false
    } // 是否展示ORE余额
  },
  data() {
    return {
      userInfo: {},
      isShow: false,
      hasAnimate: true,
      inputVal: "",
      splitPwd: []
    };
  },
  created() {
    var _this = this;
    alphaHub.$on("update_DT", function() {
      _this.userInfo = _this.DT.getUser;
    });
    alphaHub.$on("showPass", () => {
      this.inputVal = "";
      this.splitPwd = [];
      const pathName = _this.$route.name;
      console.log("pathName:", pathName);
      if (
        !this.$store.state.user.userInfo.isset_pay_password &&
        pathName != "changePaypass"
      ) {
        alphaHub.showToast({
          msg: "您还没有设置交易密码，即将前往设置页面！",
          ms: 1500
        });
        setTimeout(() => {
          _this.$router.push({ name: "changePaypass" });
        }, 1500);
        return false;
      }
      _this.isShow = true;
      setTimeout(() => {
        _this.onFocus();
      }, 100);
    });
    alphaHub.$on("hidePass", function() {
      _this.resetPass();
    });
    alphaHub.$on("paypwdWrong", function() {
      _this.handlePaypwdWrong();
    });
    alphaHub.$on("paypwdClean", function() {
      _this.handleCleanPaypwd();
    });
  },
  computed: {},
  watch: {
    inputVal() {
      let pwd = this.inputVal;
      this.splitPwd = pwd.split("");
      if (!this.modalBtnText && pwd.length === 6) {
        console.log("returnPaypwd because of no btn");
        this.returnPaypwd();
      }
    }
  },
  methods: {
    defaultConfirm: function() {
      this.resetPass();
    },
    defaultCancel: function() {
      this.$emit("close");
      this.resetPass();
    },
    onFocus: function() {
      this.inputVal = "";
      this.splitPwd = [];
      const input = document.getElementById("secret_input");
      input.focus();
    },
    returnPaypwd: function() {
      if (this.inputVal.length < 6) {
        alphaHub.showToast({ msg: "交易密码不能少于六位" });
        return false;
      }
      const input = document.getElementById("secret_input");
      input.blur();
      this.$emit("inputDone", this.inputVal);
    },
    resetPass: function() {
      this.isShow = false;
      this.inputVal = "";
      this.splitPwd = [];
    },
    handlePaypwdWrong: function() {
      this.inputVal = "";
      this.splitPwd = [];
    },
    handleCleanPaypwd: function() {
      this.inputVal = "";
      this.splitPwd = [];
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.userInfo = this.DT.getUser;
    });
  },
  destroyed: function() {
    // alphaHub.$off("showPass");
    // alphaHub.$off("hidePass");
  }
};
</script>

<style scoped lang="scss">
#my_pass {
  top: 0;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
  z-index: 1001;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
}
.modal_box {
  border-radius: 8px;
  padding: 30px 25px;
  width: 530px;
  background: white;
  position: absolute;
  left: 50%;
  margin-left: -290px;
  top: 10%;
}
.modal_title {
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
}
.modal_body {
  padding: 10px 0;
  margin-top: 25px;
  margin-bottom: 18px;
  .content {
    padding: 10px 0;
  }
  .pwd_area {
    margin: 0 auto;
    width: calc(100% - 40px);
    margin-top: 22px;
    // flex-flow: row wrap;
    .pwd_num {
      background: white;
      z-index: 5;
      width: 16.6%;
      text-align: center;
      height: 80px;
      line-height: 80px;
      font-weight: bold;
      font-size: 30px;
      border-top: solid 1px #efefef;
      border-bottom: solid 1px #efefef;
      &:last-child {
        border-right: solid 1px #efefef;
      }
      &:nth-child(n) {
        border-left: solid 1px #efefef;
      }
    }
  }
}
#secret_input {
  position: fixed;
  z-index: 6;
  top: -50%;
  height: 100px;
  color: transparent;
  opacity: 0.1;
}
.confirm_btn {
  width: 100%;
  text-align: center;
  background-image: linear-gradient(0deg, #ff9900 0%, #ffb82a 100%);
  color: #ffffff;
  margin-top: 30px;
  border-radius: 16px;
  font-size: 36px;
  padding: 19px 0;
}
.close_pop {
  // position: absolute;
  // right: 13px;
  // top: 13px;
  width: 35px;
  height: 35px;
  display: block;
  background-image: url("/game/static/images/wallet/cross.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.secret_num {
  font-size: 60px;
  color: black;
}
.show {
  transform: scale(1);
  -webkit-transform: scale(1);
  opacity: 1;
}
.hide {
  transform: scale(0);
  -webkit-transform: scale(0);
  opacity: 0;
}
</style>
